<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				padding: 0;
				margin: 0;
				list-style: none;
			}
			
			ul{
				text-align: center;
				display: flex;
			}
			
			li{
				width: 200px;
				line-height: 30px;
				border: 1px solid #000;
				background: gray;
				cursor: pointer;
			}
			
			div{
				width: 604px;
				border: 1px solid #000;
				background: #ccc;
				display: none;
			}
			
			li.active{
				background: mediumpurple;
			}
			
			div.active{
				background: darkslateblue;
				display: block;
			}
		</style>
	</head>
	<body>
		<ul>
			<li class="active">红烧排骨</li>
			<li>清蒸鲶鱼</li>
			<li>鱼香肉丝</li>
		</ul>
		
		<div class="active">红烧排骨 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem quos aspernatur officia dolore vero veniam eum porro necessitatibus eius aperiam molestias maxime corporis velit. Minima quam in esse ipsam itaque!</div>
		<div>清蒸鲶鱼 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem quos aspernatur officia dolore vero veniam eum porro necessitatibus eius aperiam molestias maxime corporis velit. Minima quam in esse ipsam itaque!</div>
		<div>鱼香肉丝 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem quos aspernatur officia dolore vero veniam eum porro necessitatibus eius aperiam molestias maxime corporis velit. Minima quam in esse ipsam itaque!</div>
		
		<script type="text/javascript">
			var lis=document.getElementsByTagName("li");
			var divs=document.getElementsByTagName("div");
			
			for(let i=0;i<lis.length;i++){
				lis[i].onclick=function(){
					for(let i=0;i<lis.length;i++){
						lis[i].className="";
						divs[i].className="";
					}
					this.className="active";
//					var j=this.getAttribute("zhn");
					divs[i].className="active";
				}
			}
		</script>
	</body>
</html>
